<template>
  <d2-container class="page">
    <el-form :inline="true" :model="searchForm">
           <el-form-item label="科目">
          <el-input
            v-model="searchForm.subject"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="年级">
          <el-select v-model="searchForm.grade" placeholder="请选择年级">
                <el-option
                v-for="item in classList"
                :key="item"
                :label="item"
                :value="item"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="试卷标题">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData()">查询</el-button>
        </el-form-item>
      </el-form>
     <ve-line :data="chartData" :settings="chartSettings" :grid="grid" :extend="chartExtendRound"></ve-line>
    
  </d2-container>
</template>

<script>
import D2Badge from './components/d2-badge'
import D2Help from './components/d2-help'
import D2PageCover from './components/d2-page-cover'
import webservice from '../../../api/webservice'
export default {
  components: {
    D2Badge,
    D2Help,
    D2PageCover
  },
  data() {
    this.chartSettings = {
        labelMap: {
          classNumber: '班级',
          averageScore: '平均分'
        }
    }
    return {
      chartData: {
        columns: ["classNumber","averageScore"],
        rows: []
      },
      chartExtendRound:{
        xAxis:{
          name:'班级',
          nameLocation:'end'
        },
      },
      searchForm:{},
      classList:[],
      grid:''
    };
  },
  created(){
    this.getData()
    this.getClassData()
  },
  mounted(){
    this.grid = { right: 60 }
  },
  methods:{
    getData() {
      let _param = {
        subject:this.searchForm.subject,
        grade:this.searchForm.grade,
        title:this.searchForm.title
      };
       let _params = JSON.stringify(_param)
      webservice.HttpPost("/api/score/selectAverage", _params, (data) => {
        if (data.code === 200) {
          this.chartData.rows = []
          this.chartData.rows = data.data
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
      //获取年级
        getClassData() {
      webservice.HttpPost("/api/clazz/selectGradeList", '{}', (data) => {
        if (data.code === 200) {
          this.classList = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  .logo {
    width: 120px;
  }
  .btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    line-height: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    .btn-group__btn {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
      &.btn-group__btn--link {
        color: $color-primary;
      }
    }
  }
}
</style>
